<template>
	<view class="container">
		<!-- 页面标题 -->
		<view class="page-header">
			<text class="page-title">比赛邀请</text>
			<view class="status-badge" :class="'status-' + (invitation.status || 'sent')">
				{{ getStatusText(invitation.status) }}
			</view>
		</view>
		
		<!-- 比赛信息 -->
		<view class="match-info-section">
			<view class="section-title">比赛信息</view>
			<view class="info-card">
				<view class="info-row">
					<text class="info-label">比赛名称：</text>
					<text class="info-value">{{ matchInfo.title || '未知比赛' }}</text>
				</view>
				<view class="info-row">
					<text class="info-label">比赛时间：</text>
					<text class="info-value">{{ scheduleInfo.date || '待定' }}</text>
				</view>
				<view class="info-row">
					<text class="info-label">比赛地点：</text>
					<text class="info-value">{{ scheduleInfo.venue || '待定' }}</text>
				</view>
				<view class="info-row">
					<text class="info-label">邀请岗位：</text>
					<text class="info-value position">{{ invitation.position || '裁判' }}</text>
				</view>
			</view>
		</view>
		
		<!-- 邀请信息 -->
		<view class="invitation-info-section">
			<view class="section-title">邀请信息</view>
			<view class="info-card">
				<view class="info-row">
					<text class="info-label">邀请人：</text>
					<text class="info-value">{{ inviterInfo.nickname || inviterInfo.username || '系统' }}</text>
				</view>
				<view class="info-row">
					<text class="info-label">邀请时间：</text>
					<text class="info-value">{{ formatDate(invitation.send_time) }}</text>
				</view>
				<view class="info-row" v-if="invitation.expire_time">
					<text class="info-label">过期时间：</text>
					<text class="info-value expire-time">{{ formatDate(invitation.expire_time) }}</text>
				</view>
			</view>
			
			<!-- 邀请消息 -->
			<view class="invitation-message" v-if="invitation.invitation_message">
				<view class="message-title">邀请消息</view>
				<view class="message-content">{{ invitation.invitation_message }}</view>
			</view>
		</view>
		
		<!-- 响应记录 -->
		<view class="response-section" v-if="invitation.status !== 'sent'">
			<view class="section-title">响应记录</view>
			<view class="info-card">
				<view class="info-row">
					<text class="info-label">响应状态：</text>
					<text class="info-value" :class="'status-text-' + invitation.status">
						{{ getStatusText(invitation.status) }}
					</text>
				</view>
				<view class="info-row" v-if="invitation.response_time">
					<text class="info-label">响应时间：</text>
					<text class="info-value">{{ formatDate(invitation.response_time) }}</text>
				</view>
			</view>
		</view>
		
		<!-- 比赛详情链接 -->
		<view class="action-section" v-if="scheduleInfo._id">
			<button class="detail-btn" @click="viewScheduleDetail">查看比赛详情</button>
		</view>
		
		<!-- 操作按钮 -->
		<view class="bottom-actions" v-if="invitation.status === 'sent' && !isExpired">
			<button class="decline-btn" @click="respondInvitation('declined')">拒绝</button>
			<button class="accept-btn" @click="respondInvitation('accepted')">接受</button>
		</view>
		
		<!-- 过期提示 -->
		<view class="expired-notice" v-if="isExpired && invitation.status === 'sent'">
			<uni-icons type="info" color="#ff6b35" size="18"></uni-icons>
			<text class="expired-text">该邀请已过期</text>
		</view>
		
		<!-- 确认对话框 -->
		<uni-popup ref="confirmPopup" type="dialog">
			<uni-popup-dialog 
				:title="confirmTitle"
				:content="confirmContent"
				:duration="2000"
				:before-close="true"
				@close="closeConfirm"
				@confirm="confirmResponse"
			></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				invitationId: '',
				invitation: {},
				matchInfo: {},
				scheduleInfo: {},
				inviterInfo: {},
				loading: false,
				
				// 确认对话框
				confirmTitle: '',
				confirmContent: '',
				pendingResponse: '',
				
				userInfo: {}
			}
		},
		computed: {
			isExpired() {
				if (!this.invitation.expire_time) return false;
				return new Date() > new Date(this.invitation.expire_time);
			}
		},
		onLoad(options) {
			this.invitationId = options.invitationId || '';
			
			if (!this.invitationId) {
				uni.showToast({
					title: '邀请不存在',
					icon: 'none'
				});
				setTimeout(() => {
					uni.navigateBack();
				}, 1500);
				return;
			}
			
			this.getUserInfo();
			this.loadInvitationDetail();
		},
		methods: {
			// 获取用户信息
			getUserInfo() {
				const userInfoStr = uni.getStorageSync('userInfo');
				if (userInfoStr) {
					try {
						this.userInfo = JSON.parse(userInfoStr);
					} catch (e) {
						console.error('解析用户信息失败', e);
					}
				}
			},
			
			// 加载邀请详情
			async loadInvitationDetail() {
				uni.showLoading({
					title: '加载中...'
				});
				
				try {
					const invitationService = uniCloud.importObject('invitation-service');
					const res = await invitationService.getInvitationDetail({
						invitationId: this.invitationId
					});
					
					if (res.code === 0) {
						this.invitation = res.data.invitation;
						this.matchInfo = res.data.matchInfo || {};
						this.scheduleInfo = res.data.scheduleInfo || {};
						this.inviterInfo = res.data.inviterInfo || {};
					} else {
						uni.showToast({
							title: res.message || '加载失败',
							icon: 'none'
						});
						
						setTimeout(() => {
							uni.navigateBack();
						}, 1500);
					}
				} catch (error) {
					console.error('加载邀请详情失败:', error);
					uni.showToast({
						title: '网络错误，请稍后再试',
						icon: 'none'
					});
				} finally {
					uni.hideLoading();
				}
			},
			
			// 响应邀请
			respondInvitation(response) {
				if (this.isExpired) {
					uni.showToast({
						title: '邀请已过期',
						icon: 'none'
					});
					return;
				}
				
				this.pendingResponse = response;
				this.confirmTitle = response === 'accepted' ? '确认接受邀请' : '确认拒绝邀请';
				this.confirmContent = response === 'accepted' 
					? `确定要接受担任${this.invitation.position || '裁判'}的邀请吗？接受后将自动为您报名参与该比赛。`
					: '确定要拒绝此邀请吗？';
				
				this.$refs.confirmPopup.open();
			},
			
			// 确认响应
			async confirmResponse() {
				uni.showLoading({
					title: '处理中...'
				});
				
				try {
					const invitationService = uniCloud.importObject('invitation-service');
					const res = await invitationService.respondInvitation({
						invitationId: this.invitationId,
						response: this.pendingResponse,
						message: this.pendingResponse === 'accepted' ? '感谢邀请，我将准时参加' : '很抱歉，无法参加此次比赛'
					});
					
					uni.hideLoading();
					
					if (res.code === 0) {
						// 更新邀请状态
						this.invitation.status = this.pendingResponse;
						this.invitation.response_time = new Date();
						
						uni.showToast({
							title: res.message || '响应成功',
							icon: 'success'
						});
						
						// 刷新页面数据
						setTimeout(() => {
							this.loadInvitationDetail();
						}, 1000);
					} else {
						uni.showToast({
							title: res.message || '响应失败',
							icon: 'none'
						});
					}
				} catch (error) {
					console.error('响应邀请失败:', error);
					uni.hideLoading();
					uni.showToast({
						title: '网络错误，请稍后再试',
						icon: 'none'
					});
				}
			},
			
			// 关闭确认对话框
			closeConfirm() {
				this.$refs.confirmPopup.close();
				this.pendingResponse = '';
			},
			
			// 查看比赛详情
			viewScheduleDetail() {
				if (!this.scheduleInfo.match_id) return;
				
				uni.navigateTo({
					url: `/packgeCompetition/competition/detail?id=${this.scheduleInfo.match_id}`
				});
			},
			
			// 获取状态文本
			getStatusText(status) {
				const statusMap = {
					'sent': '待回复',
					'accepted': '已接受',
					'declined': '已拒绝',
					'expired': '已过期'
				};
				return statusMap[status] || '未知';
			},
			
			// 格式化日期
			formatDate(dateStr) {
				if (!dateStr) return '';
				
				try {
					const date = new Date(dateStr);
					return date.toLocaleString('zh-CN', {
						year: 'numeric',
						month: '2-digit',
						day: '2-digit',
						hour: '2-digit',
						minute: '2-digit'
					});
				} catch (error) {
					return dateStr;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		background: #f5f5f5;
		padding-bottom: 120rpx;
	}
	
	.page-header {
		background: #fff;
		padding: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1rpx solid #f0f0f0;
		margin-bottom: 20rpx;
		
		.page-title {
			font-size: 36rpx;
			font-weight: bold;
			color: #333;
		}
		
		.status-badge {
			padding: 8rpx 16rpx;
			border-radius: 20rpx;
			font-size: 24rpx;
			font-weight: bold;
			
			&.status-sent {
				background: #fff3cd;
				color: #856404;
			}
			
			&.status-accepted {
				background: #d4edda;
				color: #155724;
			}
			
			&.status-declined {
				background: #f8d7da;
				color: #721c24;
			}
			
			&.status-expired {
				background: #f0f0f0;
				color: #6c757d;
			}
		}
	}
	
	.match-info-section,
	.invitation-info-section,
	.response-section {
		background: #fff;
		margin-bottom: 20rpx;
		
		.section-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
			padding: 30rpx 30rpx 20rpx;
			border-bottom: 1rpx solid #f0f0f0;
		}
		
		.info-card {
			padding: 20rpx 30rpx 30rpx;
			
			.info-row {
				display: flex;
				margin-bottom: 20rpx;
				
				&:last-child {
					margin-bottom: 0;
				}
				
				.info-label {
					width: 150rpx;
					font-size: 28rpx;
					color: #666;
					flex-shrink: 0;
				}
				
				.info-value {
					flex: 1;
					font-size: 28rpx;
					color: #333;
					
					&.position {
						color: #007aff;
						font-weight: bold;
					}
					
					&.expire-time {
						color: #ff6b35;
					}
					
					&.status-text-accepted {
						color: #28a745;
						font-weight: bold;
					}
					
					&.status-text-declined {
						color: #dc3545;
						font-weight: bold;
					}
					
					&.status-text-expired {
						color: #6c757d;
						font-weight: bold;
					}
				}
			}
		}
		
		.invitation-message {
			padding: 0 30rpx 30rpx;
			
			.message-title {
				font-size: 28rpx;
				font-weight: bold;
				color: #333;
				margin-bottom: 15rpx;
			}
			
			.message-content {
				background: #f8f9fa;
				padding: 20rpx;
				border-radius: 12rpx;
				font-size: 28rpx;
				color: #555;
				line-height: 1.6;
			}
		}
	}
	
	.action-section {
		background: #fff;
		padding: 30rpx;
		margin-bottom: 20rpx;
		
		.detail-btn {
			width: 100%;
			padding: 25rpx 0;
			background: #f8f9fa;
			color: #007aff;
			border: 2rpx solid #007aff;
			border-radius: 10rpx;
			font-size: 32rpx;
		}
	}
	
	.bottom-actions {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: #fff;
		padding: 30rpx;
		border-top: 1rpx solid #f0f0f0;
		display: flex;
		gap: 30rpx;
		
		.decline-btn {
			flex: 1;
			padding: 25rpx 0;
			background: #f8f9fa;
			color: #dc3545;
			border: 2rpx solid #dc3545;
			border-radius: 10rpx;
			font-size: 32rpx;
		}
		
		.accept-btn {
			flex: 1;
			padding: 25rpx 0;
			background: #28a745;
			color: #fff;
			border-radius: 10rpx;
			font-size: 32rpx;
		}
	}
	
	.expired-notice {
		background: #fff;
		padding: 30rpx;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 15rpx;
		
		.expired-text {
			font-size: 28rpx;
			color: #ff6b35;
			font-weight: bold;
		}
	}
</style> 